<template>
  <div class="sys-op">
    <div class="sys-op__item" @click="showModal">
      <a-button type="primary">新增</a-button>
    </div>
    <div class="sys-op__item">
      <a-button type="danger">删除</a-button>
    </div>
  </div>
  <a-table
    rowKey="id"
    size="middle"
    :columns="columns"
    :data-source="treeList"
    bordered
    :pagination="false"
    :scroll="{ x: 1500, y: 600 }"
  >
    <template #type="{ text }">
      <a-tag color="#4165d7"> {{ menuType[text] }} </a-tag>
    </template>
    <template #perms="{ text: perms }">
      {{ perms }}
    </template>
  </a-table>
  <a-modal
    key="id"
    v-model:visible="visible"
    title="新增菜单"
    width="50vw"
    ok-text="确认"
    cancel-text="取消"
    @ok="onSubmit"
  >
    <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18, offset: 1 }">
      <a-form-item label="节点类型">
        <a-radio-group v-model:value="modelRef.type">
          <a-radio :value="0">目录 </a-radio>
          <a-radio :value="1">菜单</a-radio>
          <a-radio :value="2">权限 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="节点名称" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" placeholder="请输入节点名称"></a-input>
      </a-form-item>
      <a-form-item label="上级节点">
        <a-tree-select
          v-model:value="modelRef.parent"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="siblingNodes"
          placeholder="请选择"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="是否显示" v-if="modelRef.type !== 2">
        <a-switch v-model:checked="modelRef.modelChecked" />
      </a-form-item>
      <a-form-item label="节点图标" v-if="modelRef.type !== 2">
        <a-input placeholder="请填写图标名称" v-model:value="modelRef.icon"></a-input>
      </a-form-item>
      <a-form-item label="节点路由" v-if="modelRef.type === 1">
        <a-input placeholder="请填写节点路由" v-model:value="modelRef.path"></a-input>
      </a-form-item>
      <a-form-item label="路由缓存" v-if="modelRef.type === 1">
        <a-radio-group v-model:value="modelRef.is_keep_alive">
          <a-radio :value="1">开启 </a-radio>
          <a-radio :value="0">关闭</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序号">
        <a-input-number id="inputNumber" v-model:value="modelRef.order_num" :min="1" />
      </a-form-item>
      <a-form-item label="权限" v-if="modelRef.type === 2">
        <!-- 先使用select多选添加 -->
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    width: 200
  },
  {
    title: "图标",
    dataIndex: "icon",
    key: "icon"
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    slots: { customRender: "type" },
    width: 80
  },
  {
    title: "节点路由",
    dataIndex: "path",
    key: "path"
  },
  {
    title: "文件路径",
    dataIndex: "view_path",
    key: "view_path",
    ellipsis: true
  },
  {
    title: "权限",
    dataIndex: "perms",
    key: "perms"
  },
  {
    title: "排序号",
    dataIndex: "order_num",
    key: "order_num"
  },
  {
    title: "更新时间",
    dataIndex: "update_datetime",
    key: "update_datetime"
  },
  {
    title: "操作",
    dataIndex: "perms",
    key: "perms",
    slots: { customRender: "perms" }
  }
]

const menuType = {
  0: "目录",
  1: "菜单",
  2: "权限"
}

import { useModal } from "@/hooks/use-modal"
import { computed, defineComponent, onMounted, reactive, toRefs } from "vue"
import { getPermMenu } from "@/service/common"
import { listToTree } from "@/utils/helper/treeHelper"
import { addMenu } from "@/service/menu"
import { useForm } from "@ant-design-vue/use"
import { useReload } from "@/hooks/use-reload"

export default defineComponent({
  name: "sys_menu",
  setup() {
    const { visible, showModal, hideModal } = useModal()

    const sourceData = reactive({
      siblingNodes: [],
      treeList: []
    })
    onMounted(() => {
      //
      getPermMenu()
        .then(listResult => {
          const menu_filter = listResult.menus.filter(item => item.type !== 2 && item.is_show)
          sourceData.siblingNodes = generateTree(menu_filter, "一级菜单")
          sourceData.treeList = listToTree(listResult.menus, {
            pid: "parent"
          })
        })
        .catch(err => {
          console.log(err)
        })
    })

    const generateTree = (list, name) => {
      //
      const TopNode = {
        title: name,
        key: 0,
        value: 0,
        parentId: null
      }

      const _tempList = list.map(item => {
        if (!item.parent) {
          item.parent = 0
        }
        return {
          title: item.name,
          key: item.id,
          value: item.id,
          parentId: item.parent
        }
      })
      _tempList.push(TopNode)
      return listToTree(_tempList, {
        id: "key"
      })
    }

    const modelRef = reactive({
      type: 0,
      order_num: 0,
      path: "",
      view_path: "",
      is_keep_alive: 1,
      parent: 0,
      perms: [],
      name: "",
      icon: "",
      modelChecked: true,
      is_show: computed(() => {
        return modelRef.modelChecked ? 1 : 0
      })
    })

    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入节点名称"
        }
      ]
    })
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
    // 路由重新加载
    const reload = useReload()
    const onSubmit = () => {
      validate().then(() => {
        addMenu(modelRef).then(result => {
          if (result.id) {
            reload()
          }
        })
      })
      return
    }

    return {
      columns,
      showModal,
      hideModal,
      visible,
      modelRef,
      onSubmit,
      menuType,
      ...toRefs(sourceData),
      validateInfos,
      resetFields
    }
  }
})
</script>
